<template>
    <Row :gutter="20">
        <Col span="12">
            <Row class="wl-pannel">
                <Col>
                    <Row class="wl-pannel-top">
                        <Col span="13">实时风险报警</Col>
                        <Col span="4">风险值：6%</Col>
                        <Col sapn="7" class="wl-pannel-right">企业风险等级：较小</Col>
                    </Row>
                </Col>
                <Col>
                    <Table :columns="columns1" height="300" :data="data1"></Table>
                </Col>
            </Row>
        </Col>
        <Col span="12">
            <Row class="wl-pannel">
                <Col>
                    <Row class="wl-pannel-top">
                        <Col span="13">实时隐患报警</Col>
                        <Col span="5">企业隐患风险值：6%</Col>
                        <Col sapn="6" class="wl-pannel-right">企业隐患等级：一般</Col>
                    </Row>
                </Col>
                <Col>
                    <Table :columns="columns2" height="300" :data="data1"></Table>
                </Col>
            </Row>
        </Col>
    </Row>
</template>

<script>
export default {
  name: 'twoTables',
  data () {
    return {
      columns1: [
        {
          title: '车牌号',
          key: 'a1',
          width: 100
        },
        {
          title: '驾驶人',
          width: 100,
          key: 'a2'
        }, {
          title: '隶属车队',
          minWidth: 100,
          key: 'a3'
        }, {
          title: '实时报警时间',
          width: 100,
          key: 'a4'
        }, {
          title: '实时报警内容',
          width: 100,
          key: 'a5'
        }, {
          title: '操作',
          key: 'a6',
          width: 100
        }
      ],
      columns2: [
        {
          type: 'selection',
          width: 50,
          align: 'center'
        },
        {
          title: '车牌号',
          width: 100,
          key: 'a1'
        },
        {
          title: '驾驶人',
          width: 100,
          key: 'a2'
        }, {
          title: '隶属车队',
          minWidth: 100,
          key: 'a3'
        }, {
          title: '实时报警时间',
          width: 100,
          key: 'a4'
        }, {
          title: '实时报警内容',
          width: 100,
          key: 'a5'
        }, {
          title: '操作',
          width: 100,
          key: 'a6'
        }
      ],
      data1: [
        {
          a1: '辽A23345',
          a2: '张三',
          a3: '营口道道宽物流有限公司',
          a4: '2019-08-10 14:54:51',
          a5: '左车道压线',
          a6: '处警'
        }, {
          a1: '辽A23345',
          a2: '张三',
          a3: '营口道道宽物流有限公司',
          a4: '2019-08-10 14:54:51',
          a5: '左车道压线',
          a6: '处警'
        }, {
          a1: '辽A23345',
          a2: '张三',
          a3: '营口道道宽物流有限公司',
          a4: '2019-08-10 14:54:51',
          a5: '左车道压线',
          a6: '处警'
        }, {
          a1: '辽A23345',
          a2: '张三',
          a3: '营口道道宽物流有限公司',
          a4: '2019-08-10 14:54:51',
          a5: '左车道压线',
          a6: '处警'
        }, {
          a1: '辽A23345',
          a2: '张三',
          a3: '营口道道宽物流有限公司',
          a4: '2019-08-10 14:54:51',
          a5: '左车道压线',
          a6: '处警'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
    .wl-pannel {
        padding: 10px;
        border: 1px solid #36aed5;

        &-top {
            margin-left: 5px;
            margin-bottom: 5px;
        }

        &-right {
            text-align: right;
        }
    }
</style>
